<template>
  <div>
      <div class="box">
        <div class="tab">
          <div class="li-tab" v-for="(item,index) in tabsParam"
          @click="toggleTabs(index)"
          :class="[{active:index===nowIndex},{cur:nowIndex==index}]">{{item}}
          </div>
          <div class="tab_line">

          </div>
        </div>
        <div class="list">
          <dai v-show="nowIndex===0"></dai>
          <yi v-show="nowIndex===1"></yi>
        </div>
      </div>
  </div>
</template>
<script>
import dai from "@/components/six/list/dai"            //奖品发放管理待发放
import yi from "@/components/six/list/yi"              //奖品发放管理已发放
export default {
  name: 'newCreate',
  components:{
    'dai': function(resolve) {
        require(['@/components/six/list/dai.vue'], resolve);
    },
    'yi': function(resolve) {
        require(['@/components/six/list/yi.vue'], resolve);
    }
  },
  data() {
    return{
      tabsParam:['待发放','已发放'],
      nowIndex:0,
      isShow:false
    }
  },
  methods:{
    //切换tab项
    toggleTabs(index){
      this.nowIndex = index;
      //$(window).resize();
    }
  }
}
</script>
<style lang="scss" scoped>
.cur{
  color:#43DCC2!important;
}
.box{
  width:100%;
  height:100%;
  position: fixed;
  background: rgb(247,247,247);
}

.tab{
  width:100%;
  height:0.32rem;
  position:relative;
  // position: fixed;
  // top:0.65rem;
  display:flex;
  justify-content:space-between;
  z-index: 2;
  .tab_line{
    width:0.01rem;
    height:0.26rem;
    background:#EEEEEE;
    position:absolute;
    top:0.03rem;
    left:50%;
  }
  div{
    width:50%;
    height:100%;
    line-height: 0.32rem;
    text-align:center;
    color: #636363;
    font-size:0.13rem;
    background:#FFFFFF;
  }
  div:nth-type-of(1){
    border-right:0.01rem solid rgb(247,247,247);
  }
}
.list{
  width:100%;
  height:100%;
  display:flex;
  justify-content: center;
  margin-top:0.13rem;
  // position:fixed;
  // top:0.96rem;
  overflow-x:hidden;
  overflow-y:scroll;
  z-index: 1;
}

</style>
